<template>
  <div class="basicinformation_add">
    <el-main>
      <div :class="{ active: disable == true }">
        <div>
          <div class="title">
            <span>基本信息</span>
            <div style="font-size: 12px; display: inline; margin-left: 8px">
              (带“
              <p style="display: inline; color: red">*</p>
              ”为必填项)
            </div>
          </div>
          <div style="margin-top: 20px; display: flex; margin-bottom: 20px">
            <div
              style="
                text-align: right;
                width: 100px;
                margin-top: 7px;
                margin-right: 10px;
              "
            >
              <span style="color: red">*</span>
              名称
            </div>
            <div style="width: 300px">
              <el-input v-model="data.name" placeholder="请输入内容"></el-input>
            </div>
          </div>
          <!-- <div style="margin-top: 20px; display: flex; margin-bottom: 20px">
            <div
              style="
                text-align: right;
                width: 100px;
                margin-top: 7px;
                margin-right: 10px;
              "
            >
              <span style="color: red">*</span>
              编号
            </div>
            <div style="width: 300px">
              <el-input v-model="data.code" placeholder="请输入内容"></el-input>
            </div>
          </div> -->
        </div>
        <div>
          <div class="title">
            <span>通讯信息</span>
            <div style="font-size: 12px; display: inline; margin-left: 8px">
              (带“
              <p style="display: inline; color: red">*</p>
              ”为必填项)
            </div>
          </div>
          <div style="margin-top: 20px; display: flex; margin-bottom: 20px">
            <div
              style="
                text-align: right;
                width: 100px;
                margin-top: 7px;
                margin-right: 10px;
              "
            >
              <span style="color: red">*</span>
              联系人
            </div>
            <div style="width: 300px">
              <el-input
                v-model="data.contact"
                placeholder="请输入内容"
              ></el-input>
            </div>
          </div>
          <div style="margin-top: 20px; display: flex; margin-bottom: 20px">
            <div
              style="
                text-align: right;
                width: 100px;
                margin-top: 7px;
                margin-right: 10px;
              "
            >
              <span style="color: red">*</span>
              联系电话
            </div>
            <div style="width: 300px">
              <el-input
                v-model="data.phone"
                placeholder="请输入内容"
              ></el-input>
            </div>
          </div>
          <div style="margin-top: 20px; display: flex; margin-bottom: 20px">
            <div
              style="
                text-align: right;
                width: 100px;
                margin-top: 7px;
                margin-right: 10px;
              "
            >
              <span style="color: red">*</span>
              所在城市
            </div>
            <div style="width: 300px">
              <el-input v-model="data.city" placeholder="请输入内容"></el-input>
            </div>
          </div>
          <div style="margin-top: 20px; display: flex; margin-bottom: 20px">
            <div
              style="
                text-align: right;
                width: 100px;
                margin-top: 7px;
                margin-right: 10px;
              "
            >
              <span style="color: red">*</span>
              所在区
            </div>
            <div style="width: 300px">
              <el-input v-model="data.area" placeholder="请输入内容"></el-input>
            </div>
          </div>

          <div style="margin-top: 20px; display: flex; margin-bottom: 20px">
            <div
              style="
                text-align: right;
                width: 100px;
                margin-top: 7px;
                margin-right: 10px;
              "
            >
              详细地址
            </div>
            <div style="width: 300px">
              <el-input v-model="data.addr" placeholder="请输入内容"></el-input>
            </div>
          </div>
        </div>
        <div>
          <div class="title">
            <span>财务信息</span>

            <div style="font-size: 12px; display: inline; margin-left: 8px">
              (带“
              <p style="display: inline; color: red">*</p>
              ”为必填项)
            </div>
          </div>
          <div style="margin-top: 20px; display: flex; margin-bottom: 20px">
            <div
              style="
                text-align: right;
                width: 100px;
                margin-top: 7px;
                margin-right: 10px;
              "
            >
              开户名称
            </div>
            <div style="width: 300px">
              <el-input v-model="cwxx_khmc" placeholder="请输入内容"></el-input>
            </div>
          </div>
          <div style="margin-top: 20px; display: flex; margin-bottom: 20px">
            <div
              style="
                text-align: right;
                width: 100px;
                margin-top: 7px;
                margin-right: 10px;
              "
            >
              开户银行
            </div>
            <div style="width: 300px">
              <el-input v-model="cwxx_khyh" placeholder="请输入内容"></el-input>
            </div>
          </div>
          <div style="margin-top: 20px; display: flex; margin-bottom: 20px">
            <div
              style="
                text-align: right;
                width: 100px;
                margin-top: 7px;
                margin-right: 10px;
              "
            >
              银行账号
            </div>
            <div style="width: 300px">
              <el-input v-model="cwxx_yhzh" placeholder="请输入内容"></el-input>
            </div>
          </div>
          <div style="margin-top: 20px; display: flex; margin-bottom: 20px">
            <div
              style="
                text-align: right;
                width: 100px;
                margin-top: 7px;
                margin-right: 10px;
              "
            >
              发票抬头
            </div>
            <div style="width: 300px">
              <el-input v-model="cwxx_fptt" placeholder="请输入内容"></el-input>
            </div>
          </div>
          <div style="margin-top: 20px; display: flex; margin-bottom: 20px">
            <div
              style="
                text-align: right;
                width: 100px;
                margin-top: 7px;
                margin-right: 10px;
              "
            >
              税号
            </div>
            <div style="width: 300px">
              <el-input v-model="cwxx_sh" placeholder="请输入内容"></el-input>
            </div>
          </div>
        </div>
        <div></div>
      </div>
      <div class="title">
        <span>基本信息</span>
        <div style="font-size: 12px; display: inline; margin-left: 8px">
          （图片上传最多可上传五张）
        </div>
      </div>
      <div style="margin-top: 10px">
        <el-upload
          :disabled="disable"
          action="https://up-z2.qiniup.com"
          :data="formToken"
          list-type="picture-card"
          accept=".JPG,.PNG,.JPEG"
          :on-success="uploadImg"
          :before-upload="beforeAvatarUpload"
          :limit="6"
          :file-list="imgList"
          ref="upload"
          :on-remove="delGoodsImg"
          :on-preview="handleImgPreview"
          :on-exceed="MoreImg"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog
          :visible.sync="dialogVisible"
          :modal-append-to-body="false"
          append-to-body
        >
          <img alt="" :src="dialogImageUrl" width="100%" />
        </el-dialog>
      </div>

      <div style="margin-top: 10px">
        <el-button type="primary" @click="addfunc" v-if="disable == false">保存</el-button>
        <el-button type="primary" plain @click="funcback">取消</el-button>
      </div>
    </el-main>
  </div>
</template>

<!-- {
    "path":"acc",
    "item_id": 11,
    "seq": 1,
    "remarks": "哈哈"
} -->



<script>
import { editsupplier, getsupplierAll } from '@/api/purchase/supplierapi'
import { getGoodsToken } from '@/api/goodslist'
import { imgadd, imgdel, imglist } from '@/api/purchase/purchaseimg.js'
import { handleActivePath } from '@/utils/routes'
import { mapActions } from 'vuex'
export default {
  data() {
    return {
      disable: false,
      data: {
        name: '',
        code: '',
        contact: '',
        phone: '',
        province: '',
        city: '',
        area: '',
        addr: '',
        status: 1,
        remarks: '',
      },
      domain: 'https://cdn.weikedashi.net/',
      formToken: {
        key: '',
        token: '',
      },
      imgList: [],
      dialogVisible: false,
      dialogImageUrl: '',
      jbxx_name: '', //基本信息名称
      txxx_lxr: '', //通讯信息联系人
      txxx_lxdh: '', //通讯信息联系电话
      txxx_dh: '', //通讯信息电话
      txxx_xxdz: '', //通讯信息详细地址
      cwxx_khmc: '', //财务信息开户名称
      cwxx_khyh: '', //财务信息开户银行
      cwxx_yhzh: '', //财务信息银行账号
      cwxx_fptt: '', //财务信息发票抬头
      cwxx_sh: '', //财务信息税号
      zhxx_dlzh: '', //账号信息登录账号
      zhxx_mm: '', //账号信息密码
      info: '', //全部信息
    }
  },
  created() {
    this.getDisable()
  },
  async mounted() {
    this.getimglist()
    let data = {
      id: this.$route.params.id,
    }
    let res = await getsupplierAll(data)
    this.info = res.list[0]
    this.data = res.list[0]
  },
  methods: {
    getDisable() {
      let a = window.location.hash
      if (a.includes('item') == true) {
        this.disable = true
      }
    },
    ...mapActions({
      delVisitedRoute: 'tabs/delVisitedRoute',
    }),
    async getimglist() {
      let res = await imglist({
        item_id: parseInt(this.$route.params.id),
        seq: 5,
      })
      if (res.list.length != 0) {
        this.imgList = res.list.map((item) => {
          return {
            ...item,
            url: item.path,
          }
        })
      }
    },
    funcback() {
      this.$confirm('确定返回列表页面?', '确定', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const detailPath = await handleActivePath(this.$route, true)
          await this.$router.push(
            '/purchase/initialvalue_supplier'
          )
          await this.delVisitedRoute(detailPath)
        })
        .catch(() => {})
    },
    handleImgPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    generate_key() {
      var timestamp = new Date().getTime()
      var str = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
      var arr = str.split('')
      var result = ''
      for (var i = 0; i < 8; i++) {
        var n = Math.floor(Math.random() * arr.length)
        result += arr[n]
      }
      this.formToken.key = result + timestamp
    },
    async beforeAvatarUpload(file) {
      if (file.size / 1024 / 1024 > 3) {
        this.$message({
          message: '上传文件大小不能超过 3MB!',
          type: 'error',
        })
        return false
      }
      const res = await getGoodsToken()
      this.formToken.token = res.data.token
      this.generate_key()
    },
    MoreImg() {
      this.$message.warning('当前限制选择 5 个文件,需删除之前图片')
    },
    async delGoodsImg(file) {
      let res = await imgdel(file.id)
      if (res.status == 200) {
        this.$message.success('删除成功')
      } else {
        this.$message.error('删除失败')
      }
    },
    async uploadImg(res, file) {
      const imgurl = this.domain + res.key

      let data = {
        path: imgurl,
        itemId: parseInt(this.$route.params.id),
        seq: 5,
        remarks: '哈哈',
      }

      let ress = await imgadd(data)
      // this.Imgdata.path = imgurl
      // this.Imgdata.name = file.name
      // const ret = await getGoodsAddImg(this.Imgdata)
      // this.detailimg = false
      // this.mainimg = false
      // if (ret.status == '200') {
      //   this.$message({
      //     message: '图片添加成功',
      //     type: 'success',
      //   })
      //   // this.getList()
      // }
    },
    async addfunc() {
      if (this.data.name == '') {
        this.$message({
          message: '名称未填写',
          type: 'error',
        })
        return
      }
      // if (this.data.code == '') {
      //   this.$message({
      //     message: '编号未填写',
      //     type: 'error',
      //   })
      //   return
      // }
      if (this.data.contact == '') {
        this.$message({
          message: '联系人未填写',
          type: 'error',
        })
        return
      }
      if (this.data.phone.length != 11) {
        this.$message({
          message: '联系电话填写错误',
          type: 'error',
        })
        return
      }
      if (this.data.city == '') {
        this.$message({
          message: '所在城市未填写',
          type: 'error',
        })
        return
      }
      if (this.data.area == '') {
        this.$message({
          message: '所在城市未填写',
          type: 'error',
        })
        return
      }
      let res = await editsupplier(this.data)
      if (res.status == 200) {
        this.$message({
          message: '保存成功',
          type: 'success',
        })
        this.$router.push('/purchase/initialvalue_supplier')
      } else {
        this.$message({
          message: '错误',
          type: 'error',
        })
      }
    },
  },
}
</script>

<style>
.basicinformation_add .title {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.basicinformation_add .title span {
  display: inline-block;
  padding-left: 8px;
  font-size: 16px;
  border-left: 4px solid #1890ff;
}

.basicinformation_add .title p {
  display: inline;
}
.active {
  pointer-events: none;
  opacity: 0.9;
}
</style>
